<template>
  <aside class="Sidebar">
    <h2></h2>
    <div class="nav-top">
      <div title="纵胜MES(WEB版)" class="com-logo-box">
        <img src="../assets/logo.png" alt="Logo" class="admin-logo" />
        <span class="admin-title">纵胜新材</span>
      </div>
      <div class="admin-info">
        <!-- <span class="admin-name">管理员</span>
        <span class="admin-role">超级管理员</span> -->
      </div>
    </div>
    <nav>
      <ul>
        <li>
          <router-link to="/homePage" active-class="active-link">首页</router-link>
        </li>
        <li>
          <router-link to="/tasksPage" active-class="active-link">任务管理</router-link>
        </li>
        <li>
          <router-link to="/reportsPage" active-class="active-link">报表</router-link>
        </li>
        <li>
          <router-link to="/settingsPage" active-class="active-link">设置</router-link>
        </li>
      </ul>
    </nav>
  </aside>
</template>

<style scoped>
.active-link {
  font-weight: bold;
  color: #ffdd57 !important; /* 激活状态的颜色 */
}
</style>

<style scoped>
.Sidebar {
  width: 250px;
  background-color: #42b983; /* Vue3 标志性绿色 */
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  height: 100vh; /* 使侧边栏占满整个高度 */
  /*  position: fixed; 固定定位 */
  left: 0; /* 靠左 */
  top: 0; /* 顶部对齐 */
}
.com-logo-box {
  display: flex;
  align-items: center; /* 使内容垂直居中 */
  margin-bottom: 20px; /* 调整底部间距 */
  /* justify-content: left;
  align-items: left;*/
}

.admin-logo {
  width: 50px; /* 设置图片宽度 图片过大，可以调整width的值。例如，设置为80px或60px等 */
  height: auto; /* 保持图片比例 */
  max-width: 100%; /* 防止图片溢出 */
  border-radius: 10px; /* 添加圆角，10px为轻微圆角 */
}
.admin-title {
  font-size: 24px; /* 设置标题字体大小 */
  color: #ffffff; /* 设置标题颜色 */
  margin-left: 10px; /* 调整标题与图片之间的间距 */
  line-height: 1; /* 确保文本垂直居中 */
  vertical-align: middle; /* 使文本在行内垂直居中 */
}
nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  margin: 15px 0;
}

nav a {
  text-decoration: none;
  color: white; /* 白色文字 */
  font-size: 16px;
}

nav a:hover {
  color: #f0f0f0; /* 浅灰色 hover 效果 */
}
</style>
